<head>
    <meta charset="UTF-8" content="#">
    <title>计划人员基本信息页面</title>
    <!-- 引入CSS -->
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/css/demo.css">
    <!-- 引入JS -->
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/easyui/themes/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/easyui/js/validateExtends.js"></script>
    <script type="text/javascript" src="/common/js/common.js"></script>
    <script type="text/javascript" src="/common/js/status.js"></script>
    <script type="text/javascript">
        //DOM加载完成后执行的回调函数
        $(function () {
            var table;
            //初始化datagrid
            $('#dataList').datagrid({
                iconCls: 'icon-more',//图标
                border: true,
                collapsible: false,//是否可折叠
                fit: true,//自动大小
                method: "post",
                url: "/plan-person/getPlanPersons?t" + new Date().getTime(),
                idField: 'id',
                singleSelect: false,//是否单选
                rownumbers: true,//行号
                pagination: true,//分页控件
                remoteSort: false,
                columns: [
                    [{field: 'chk', checkbox: true, width: 50},
                        {field: 'id', title: 'ID', width: 50, sortable: true},
                        {field: 'planGroup', title: '计划组', width: 50, sortable: true},
                        {field: 'planName', title: '姓名', width: 60, sortable: true},
                        {field: 'planSex', title: '性别', width: 40},
                        {field: 'planTel', title: '电话', width: 120},
                        {field: 'planAddress', title: '住址', width: 150},
                        {field: 'remark', title: '简介', width: 200},
                        {
                            field: 'personType', title: '员工类型', width: 100,
                            formatter: function (value, row, index) {
                                return getPersonType(value);
                            }
                        },
                        {
                            field: 'createTime', title: '创建时间', width: 200,
                            formatter: function (value, row, index) {
                                return transTime(value);
                            }
                        },
                        {
                            field: 'updateTime', title: '更新时间', width: 200,
                            formatter: function (value, row, index) {
                                return transTime(value);
                            }
                        }]
                ],
                toolbar: '#toolbar'//工具栏
            });

            //设置分页控件
            var p = $('#dataList').datagrid('getPager');
            $(p).pagination({
                pageSize: 10,//设置每页显示的记录条数,默认为10
                pageList: [10, 20, 30, 50, 100],//设置每页记录的条数
                beforePageText: '第',
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
            });

            //信息添加按钮事件
            $("#add").click(function () {
                table = $("#addTable");
                $("#addTable").form("clear");//清空表单数据
                $("#addDialog").dialog("open");//打开添加窗口
                $("#add_planSex").textbox('setValue', '男');
            });

            //信息修改按钮事件
            $("#update").click(function () {
                table = $("#updateTable");
                var selectRows = $("#dataList").datagrid("getSelections");
                if (selectRows.length !== 1) {
                    $.messager.alert("消息提醒", "请单条选择想要修改的数据哟!", "warning");
                } else {
                    $("#updateDialog").dialog("open");
                }
            });

            //信息删除按钮事件
            $("#delete").click(function () {
                var selectRows = $("#dataList").datagrid("getSelections");//返回所有选中的行,当没有选中的记录时,将返回空数组
                var selectLength = selectRows.length;
                if (selectLength === 0) {
                    $.messager.alert("消息提醒", "请选择想要删除的数据哟!", "warning");
                } else {
                    var ids = [];
                    $(selectRows).each(function (i, row) {
                        ids[i] = row.id;//将预删除行的id存储到数组中
                    });
                    $.messager.confirm("消息提醒", "删除后将无法恢复该计划员信息! 确定继续?", function (r) {
                        if (r) {
                            $.ajax({
                                type: "post",
                                url: "/plan-person/deletePlanPersons?t" + new Date().getTime(),
                                data: {ids: ids},
                                dataType: 'json',
                                success: function (data) {
                                    if (data.success) {
                                        $.messager.alert("消息提醒", "删除成功啦!", "info");
                                        $("#dataList").datagrid("reload");//刷新表格
                                        $("#dataList").datagrid("uncheckAll");//取消勾选当前页所有的行
                                    } else {
                                        $.messager.alert("消息提醒", "服务器端发生异常! 删除失败!", "warning");
                                    }
                                }
                            });
                        }
                    });
                }
            });

            //设置添加计划员信息窗口
            $("#addDialog").dialog({
                title: "添加计划员信息窗口",
                width: 880,
                height: 530,
                iconCls: "icon-house",
                modal: true,
                collapsible: false,
                minimizable: false,
                maximizable: false,
                draggable: true,
                closed: true,
                buttons: [
                    {
                        text: '添加',
                        plain: true,
                        iconCls: 'icon-add',
                        handler: function () {
                            var validate = $("#addForm").form("validate");
                            var validate = true;
                            if (!validate) {
                                $.messager.alert("消息提醒", "请检查你输入的数据哟!", "warning");
                            } else {
                                var data = $("#addForm").serialize();//序列化表单信息
                                $.ajax({
                                    type: "post",
                                    url: "/plan-person/addPlanPerson?t" + new Date().getTime(),
                                    data: data,
                                    dataType: 'json',
                                    success: function (data) {
                                        if (data.success) {
                                            $("#addDialog").dialog("close"); //关闭窗口
                                            $('#dataList').datagrid("reload");//重新刷新页面数据
                                            $.messager.alert("消息提醒", "添加成功啦!", "info");
                                        } else {
                                            $.messager.alert("消息提醒", data.msg, "warning");
                                        }
                                    }
                                });
                            }
                        }
                    }, {
                        text: '关闭',
                        plain: true,
                        iconCls: 'icon-error',
                        handler: function () {
                            $("#addDialog").dialog("close");//关闭添加窗口
                        }
                    }
                ]
            });

            //设置编辑计划员信息窗口
            $("#updateDialog").dialog({
                title: "修改计划员信息窗口",
                width: 880,
                height: 500,
                iconCls: "icon-house",
                modal: true,
                collapsible: false,
                minimizable: false,
                maximizable: false,
                draggable: true,
                closed: true,
                buttons: [
                    {
                        text: '提交',
                        plain: true,
                        iconCls: 'icon-update',
                        handler: function () {
                            var validate = $("#updateForm").form("validate");
                            if (!validate) {
                                $.messager.alert("消息提醒", "请检查你输入的数据哟!", "warning");
                            } else {
                                var data = $("#updateForm").serialize();//序列化表单信息
                                $.ajax({
                                    type: "post",
                                    url: "/plan-person/updatePlanPerson?t=" + new Date().getTime(),
                                    data: data,
                                    dataType: 'json',
                                    success: function (data) {
                                        if (data.success) {
                                            //关闭窗口
                                            $("#updateDialog").dialog("close");
                                            //重新刷新页面数据
                                            $('#dataList').datagrid("reload");
                                            $('#dataList').datagrid("uncheckAll");
                                            //用户提示
                                            $.messager.alert("消息提醒", "修改成功啦!", "info");
                                        } else {
                                            $.messager.alert("消息提醒", data.msg, "warning");
                                        }
                                    }
                                });
                            }
                        }
                    }, {
                        text: '关闭',
                        plain: true,
                        iconCls: 'icon-error',
                        handler: function () {
                            $("#updateDialog").dialog("close");//关闭添加窗口
                        }
                    }
                ],
                //打开窗口前先初始化表单数据(表单回显)
                onBeforeOpen: function () {
                    var selectRow = $("#dataList").datagrid("getSelected");
                    $("#update_id").val(selectRow.id);//初始化id值,需根据id更新计划员信息
                    $("#update_planGroup").textbox('setValue', selectRow.planGroup);
                    $("#update_planName").textbox('setValue', selectRow.planName);
                    $("#update_planTel").textbox('setValue', selectRow.planTel);
                    $("#update_planPwd").textbox('setValue', selectRow.planPwd);
                    $("#update_planAddress").textbox('setValue', selectRow.planAddress);
                    $("#update_planSex").textbox('setValue', selectRow.planSex);
                    $("#update_remark").textbox('setValue', selectRow.remark);
                }
            });

        });

    </script>
</head>
<body>

<!-- 计划员列表信息 -->
<table id="dataList" cellspacing="0" cellpadding="0"></table>
<!-- 工具栏 -->
<div id="toolbar">
    <a id="add" href="javascript:" class="easyui-linkbutton"
       data-options="iconCls:'icon-add',plain:true">添加计划员</a>

    <a id="update" href="javascript:" class="easyui-linkbutton"
       data-options="iconCls:'icon-edit',plain:true">修改计划员</a>

    <a id="delete" href="javascript:" class="easyui-linkbutton"
       data-options="iconCls:'icon-some-delete',plain:true">删除计划员</a>
</div>
<!-- 添加信息窗口 -->
<div id="addDialog" style="padding: 15px 0 0 55px;">
    <!-- 计划员信息表单 -->
    <form id="addForm" method="post" action="#">
        <table id="addTable" style="border-collapse:separate; border-spacing:0 3px;" cellpadding="6">
            <tr>
                <td>计划组</td>
                <td colspan="1">
                    <input id="add_planGroup" style="width: 200px; height: 30px;" class="easyui-textbox"
                           name="planGroup"/>
                </td>
            </tr>
            <tr>
                <td>身份</td>
                <td colspan="1">
                    <select id="add_personType" style="width: 200px; height: 30px;" class="easyui-combobox"
                            type="text" name="personType" data-options="editable:false">
                        <option value="3" selected="selected">计划员</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>姓名</td>
                <td colspan="1">
                    <input id="add_planName" style="width: 200px; height: 30px;" class="easyui-textbox"
                           type="text" name="planName" data-options="required:true, missingMessage:'请填写姓名哟~'"/>
                </td>
            </tr>

            <tr>
                <td>密码</td>
                <td colspan="1">
                    <input id="add_planPwd" style="width: 200px; height: 30px;" class="easyui-textbox"
                           type="text" name="planPwd" data-options="required:true, missingMessage:'请填写密码哟~'"/>
                </td>
            </tr>

            <tr>
                <td>性别</td>
                <td>
                    <select id="add_planSex" class="easyui-combobox"
                            data-options="editable: false, panelHeight: 50, width: 60, height: 30" name="planSex">
                        <option value="男" selected="selected">男</option>
                        <option value="女">女</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>电话</td>
                <td colspan="4"><input id="add_planTel" style="width: 200px; height: 30px;" class="easyui-textbox"
                                       type="text" name="planTel" validType="mobile"
                                       data-options="required:true, missingMessage:'请填写联系方式哟~'"/>
                </td>
            </tr>

            <tr>
                <td>住址</td>
                <td colspan="1"><input id="add_planAddress" style="width: 200px; height: 30px;" class="easyui-textbox"
                                       type="text" name="planAddress"
                                       data-options="required:true, missingMessage:'请填写家庭住址哟~'"/>
                </td>
            </tr>
            <tr>
                <td>简介</td>
                <td colspan="4"><input id="add_remark" style="width: 200px; height: 60px;"
                                       class="easyui-textbox"
                                       type="text" name="remark"
                                       data-options="multiline:true"/>
                </td>
            </tr>
        </table>
    </form>
</div>


<!-- 修改信息窗口 -->
<div id="updateDialog" style="padding: 20px 0 0 65px">
    <!-- 计划员信息表单 -->
    <form id="updateForm" method="post" action="#">
        <!-- 获取被修改信息的计划员id -->
        <input type="hidden" id="update_id" name="id"/>
        <table id="updateTable" style="border-collapse:separate; border-spacing:0 3px;" cellpadding="6">
            <tr>
                <td>计划组</td>
                <td colspan="1">
                    <input id="update_planGroup" style="width: 200px; height: 30px;" class="easyui-textbox"
                           name="planGroup"/>
                </td>
            </tr>

            <tr>
                <td>姓名</td>
                <td colspan="1">
                    <input id="update_planName" style="width: 200px; height: 30px;" class="easyui-textbox"
                           type="text" name="planName" data-options="required:true, missingMessage:'请填写姓名哟~'"/>
                </td>
            </tr>

            <tr>
                <td>电话</td>
                <td colspan="4"><input id="update_planTel" style="width: 200px; height: 30px;" class="easyui-textbox"
                                       type="text" name="planTel" validType="mobile"
                                       data-options="required:true, missingMessage:'请填写联系方式哟~'"/>
                </td>
            </tr>


            <tr>
                <td>密码</td>
                <td colspan="1">
                    <input id="update_planPwd" style="width: 200px; height: 30px;" class="easyui-textbox"
                           type="text" name="planPwd" data-options="required:true, missingMessage:'请填写密码哟~'"/>
                </td>
            </tr>

            <tr>
                <td>住址</td>
                <td colspan="1"><input id="update_planAddress" style="width: 200px; height: 30px;"
                                       class="easyui-textbox"
                                       type="text" name="planAddress"
                                       data-options="required:true, missingMessage:'请填写家庭住址哟~'"/>
                </td>
            </tr>

            <tr>
                <td>性别</td>
                <td>
                    <select id="update_planSex" class="easyui-combobox"
                            data-options="editable: false, panelHeight: 50, width: 60, height: 30" name="planSex">
                        <option value="男" selected="selected">男</option>
                        <option value="女">女</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>简介</td>
                <td colspan="4"><input id="update_remark" style="width: 200px; height: 60px;"
                                       class="easyui-textbox"
                                       type="text" name="remark"
                                       data-options="multiline:true"/>
                </td>
            </tr>

            <tr>
                <td>身份</td>
                <td colspan="1">
                    <select id="update_personType" style="width: 200px; height: 30px;" class="easyui-combobox"
                            name="personType" data-options="editable:false">
                        <option value="3" selected="selected">计划员</option>
                    </select>
                </td>
            </tr>

        </table>
    </form>
</div>

</body>
</html>